<template>
  <div class="care-plan-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">💝 会员关怀计划</span>
          <el-button type="primary" @click="handleCreatePlan">
            <el-icon><Plus /></el-icon>
            创建计划
          </el-button>
        </div>
      </template>

      <!-- 关怀计划列表 -->
      <el-table :data="carePlans" border stripe>
        <el-table-column prop="name" label="计划名称" width="200" />
        <el-table-column prop="targetType" label="目标人群" width="150">
          <template #default="{ row }">
            {{ getTargetTypeName(row.targetType) }}
          </template>
        </el-table-column>
        <el-table-column prop="careType" label="关怀类型" width="150">
          <template #default="{ row }">
            {{ getCareTypeName(row.careType) }}
          </template>
        </el-table-column>
        <el-table-column prop="frequency" label="执行频率" width="150">
          <template #default="{ row }">
            {{ getFrequencyName(row.frequency) }}
          </template>
        </el-table-column>
        <el-table-column prop="memberCount" label="目标人数" width="100">
          <template #default="{ row }">
            <el-tag>{{ row.memberCount }}人</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="completedCount" label="已执行" width="100">
          <template #default="{ row }">
            <el-tag type="success">{{ row.completedCount }}次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '进行中' : '已暂停' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleViewDetail(row)">详情</el-button>
            <el-button link type="success" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="warning" @click="handleExecute(row)">立即执行</el-button>
            <el-button link type="danger" @click="handleStop(row)">停止</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 关怀执行记录 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 关怀执行记录</span>
      </template>
      <el-table :data="careRecords" border stripe>
        <el-table-column prop="planName" label="计划名称" width="200" />
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="careContent" label="关怀内容" show-overflow-tooltip />
        <el-table-column prop="executeTime" label="执行时间" width="160" />
        <el-table-column prop="result" label="结果" width="120">
          <template #default="{ row }">
            <el-tag :type="getResultTag(row.result)">
              {{ row.result }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="执行人" width="100" />
      </el-table>
    </el-card>

    <!-- 创建计划对话框 -->
    <el-dialog v-model="planDialogVisible" title="创建关怀计划" width="800px">
      <el-form :model="planForm" label-width="100px">
        <el-form-item label="计划名称">
          <el-input v-model="planForm.name" />
        </el-form-item>
        
        <el-form-item label="目标人群">
          <el-select v-model="planForm.targetType">
            <el-option label="高风险流失会员" value="high_risk" />
            <el-option label="中风险流失会员" value="medium_risk" />
            <el-option label="VIP会员" value="vip" />
            <el-option label="生日会员" value="birthday" />
            <el-option label="长期未消费" value="inactive" />
            <el-option label="自定义分组" value="custom" />
          </el-select>
        </el-form-item>

        <el-form-item label="关怀类型">
          <el-select v-model="planForm.careType">
            <el-option label="优惠券发放" value="coupon" />
            <el-option label="短信问候" value="sms" />
            <el-option label="电话回访" value="call" />
            <el-option label="生日祝福" value="birthday_wish" />
            <el-option label="专属活动" value="activity" />
          </el-select>
        </el-form-item>

        <el-form-item label="执行频率">
          <el-select v-model="planForm.frequency">
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
            <el-option label="一次性" value="once" />
          </el-select>
        </el-form-item>

        <el-form-item label="执行时间" v-if="planForm.frequency !== 'once'">
          <el-time-picker
            v-model="planForm.executeTime"
            placeholder="选择时间"
            value-format="HH:mm"
          />
        </el-form-item>

        <el-form-item label="关怀内容">
          <el-input v-model="planForm.content" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="启动计划">
          <el-switch v-model="planForm.autoStart" />
          <div class="form-tip">创建后立即启动计划</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="planDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePlanSubmit">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const carePlans = ref([
  { 
    name: '高风险会员召回', targetType: 'high_risk', careType: 'coupon',
    frequency: 'weekly', memberCount: 156, completedCount: 12, status: 'active'
  },
  { 
    name: 'VIP会员关怀', targetType: 'vip', careType: 'call',
    frequency: 'monthly', memberCount: 456, completedCount: 8, status: 'active'
  },
  { 
    name: '生日祝福', targetType: 'birthday', careType: 'birthday_wish',
    frequency: 'daily', memberCount: 25, completedCount: 234, status: 'active'
  }
])

const careRecords = ref([
  { planName: '高风险会员召回', memberName: '刘一', phone: '13700137001', careContent: '发放100元优惠券', executeTime: '2024-01-20 10:00', result: '已发送', operator: '系统' },
  { planName: 'VIP会员关怀', memberName: '张三', phone: '13800138001', careContent: '电话回访', executeTime: '2024-01-19 14:30', result: '已完成', operator: '客服A' }
])

const planDialogVisible = ref(false)

const planForm = reactive({
  name: '',
  targetType: 'high_risk',
  careType: 'coupon',
  frequency: 'weekly',
  executeTime: '10:00',
  content: '',
  autoStart: true
})

const getTargetTypeName = (type) => {
  const map = {
    high_risk: '高风险流失',
    medium_risk: '中风险流失',
    vip: 'VIP会员',
    birthday: '生日会员',
    inactive: '长期未消费',
    custom: '自定义分组'
  }
  return map[type] || type
}

const getCareTypeName = (type) => {
  const map = {
    coupon: '优惠券发放',
    sms: '短信问候',
    call: '电话回访',
    birthday_wish: '生日祝福',
    activity: '专属活动'
  }
  return map[type] || type
}

const getFrequencyName = (freq) => {
  const map = { daily: '每天', weekly: '每周', monthly: '每月', once: '一次性' }
  return map[freq] || freq
}

const getResultTag = (result) => {
  const map = { '已发送': 'success', '已完成': 'success', '失败': 'danger' }
  return map[result] || 'info'
}

const handleCreatePlan = () => {
  planDialogVisible.value = true
}

const handleViewDetail = () => {
  ElMessage.info('查看计划详情')
}

const handleEdit = () => {
  ElMessage.info('编辑计划')
}

const handleExecute = () => {
  ElMessage.success('计划执行成功')
}

const handleStop = () => {
  ElMessage.success('计划已停止')
}

const handlePlanSubmit = () => {
  ElMessage.success('关怀计划创建成功')
  planDialogVisible.value = false
}
</script>

<style scoped>
.care-plan-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

